<template>
  <div class="follow-management">
    <h1>关注管理</h1>
    <div class="card">
      <div v-if="loading" class="loading">加载中...</div>
      <table v-else class="data-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>关注者ID</th>
            <th>关注者</th>
            <th>被关注者ID</th>
            <th>被关注者</th>
            <th>关注时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in follows" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.followerId }}</td>
            <td>{{ item.followerName }}</td>
            <td>{{ item.followedId }}</td>
            <td>{{ item.followedName }}</td>
            <td>{{ item.followDate }}</td>
            <td>
              <button class="btn-danger" @click="handleDelete(item.id)">取消关注</button>
            </td>
          </tr>
        </tbody>
      </table>
      
      <div class="pagination">
        <button 
          @click="handlePrevPage" 
          :disabled="currentPage <= 1"
          class="btn-pagination"
        >
          上一页
        </button>
        <span class="page-info">第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
        <button 
          @click="handleNextPage" 
          :disabled="currentPage >= totalPages"
          class="btn-pagination"
        >
          下一页
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

// 数据相关
const follows = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)

// 模拟数据
const mockFollows = [
  { id: 1, followerId: 1001, followerName: '张三', followedId: 2001, followedName: '技术大牛', followDate: '2025-11-01 10:30:00' },
  { id: 2, followerId: 1002, followerName: '李四', followedId: 2002, followedName: '前端专家', followDate: '2025-11-02 14:15:00' },
  { id: 3, followerId: 1003, followerName: '王五', followedId: 2003, followedName: '后端大神', followDate: '2025-11-03 09:45:00' },
  { id: 4, followerId: 1001, followerName: '张三', followedId: 2004, followedName: 'UI设计大师', followDate: '2025-11-04 16:20:00' },
  { id: 5, followerId: 1004, followerName: '赵六', followedId: 2005, followedName: '产品经理', followDate: '2025-11-05 11:30:00' },
  { id: 6, followerId: 1005, followerName: '孙七', followedId: 2006, followedName: '算法工程师', followDate: '2025-11-06 13:45:00' },
  { id: 7, followerId: 1006, followerName: '周八', followedId: 2007, followedName: '架构师', followDate: '2025-11-07 15:20:00' }
]

// 计算总页数
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))

// 获取当前页数据
const getCurrentPageData = () => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return mockFollows.slice(start, end)
}

// 获取关注数据
const fetchFollows = () => {
  loading.value = true
  // 模拟API调用延迟
  setTimeout(() => {
    follows.value = getCurrentPageData()
    total.value = mockFollows.length
    loading.value = false
  }, 300)
}

// 取消关注
const handleDelete = (id) => {
  if (confirm('确定要取消这个关注关系吗？')) {
    // 模拟删除操作
    const index = follows.value.findIndex(item => item.id === id)
    if (index > -1) {
      follows.value.splice(index, 1)
      alert('取消关注成功')
    }
  }
}

// 分页相关
const handlePrevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    fetchFollows()
  }
}

const handleNextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    fetchFollows()
  }
}

onMounted(() => {
  fetchFollows()
})
</script>

<style scoped>
.follow-management {
  padding: 20px;
}

.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 20px;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.data-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.btn-danger {
  background-color: #f56c6c;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-danger:hover {
  background-color: #ef4747;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.btn-pagination {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-pagination:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

.page-info {
  color: #666;
}
</style>